<template>
  <div>
      <header>
        <router-link class="back" to='/my/0' v-show="pageShow"></router-link>
        <a class="back" v-show="!pageShow" @click="back"></a>
        <span class="headerTxt">{{title}}</span>
      </header>
      <section class="page" v-show="pageShow">
        <div class="wrap">
          <div class="userLogin" v-show="pwdShow">
            <div class="inputContainer">
              <input id="username" v-model="username" type="text" placeholder="用户名/邮箱/已验证手机" @focus="userCloseShow=true" @blur="userCloseShow=false"  @keyup="loginKey" maxlength="11">
              <span class="close userClose" v-show="userCloseShow" @click="username=''"></span>
            </div>
            <div class="inputContainer">
              <input id="password" v-model="password" type="password" placeholder="请输入密码" @focus="pwdCloseShow=true" @blur="pwdCloseShow=false"  @keyup="loginKey">
              <span class="close pwdClose" v-show="pwdCloseShow" @click="password=''"></span>
              <div class="eye" @click="cutEye"></div>
              <button class="forget">忘记密码</button>
            </div>
          </div>
          <div class="userLogin" v-show="!pwdShow">
            <div class="inputContainer">
              <label class="areaBox" @click="areaShow">
                <span class="code">+86</span>
                <span class="areaIcon"></span>
              </label>
              <input id="phone" type="tel" placeholder="请输入手机号" @focus="phoneShow=true" @blur="phoneShow=false" @keyup="loginKey2" maxlength="11">
              <span class="close telClose" v-show="phoneShow" @click="clearInput($event)"></span>
              <button class="forget" id="verCode" @click="codeEvent">获取验证码</button>
            </div>
            <div class="inputContainer">
              <input id="codeNum" type="text" placeholder="请输入收到的验证码" @focus="codeShow=true" @blur="codeShow=false" @keyup="loginKey2">
              <span class="close userClose" v-show="codeShow" @click="clearInput($event)"></span>
            </div>
          </div>
          <div class="notice"></div>
          <a id="loginBtn" class="btn loBtn" v-show="pwdShow" @click="loginIng">登 录</a>
          <a id="loginBtn2" class="btn loBtn" v-show="!pwdShow" @click="loginIng2">登 录</a>
          <a href="#" id="loginOneStep" class="btn">一键登录</a>
          <div class="quickWay">
            <a class="ways" @click="cutWay">{{loginWay}}</a>
            <router-link to='/register' class="ways way2">手机快速注册</router-link>
            <div class="clear"></div>
          </div>
          <div class="errorDialog">
            <span class="toast">{{message}}</span>
        </div>
          <div class="loginType">
            <div class="quickLogin">
              <h4>其他登录方式</h4>
              <a href="#" class="loginWays">
                <span class="qq icon"></span><br/>
                <span class="txt">QQ</span>
              </a>
              <a href="#" class="loginWays">
                <span class="weChat icon"></span><br/>
                <span class="txt">微信</span>
              </a>
            </div>
            <div class="agreeTip">
              <p>登录即代表您已同意<a href="#">京东隐私政策</a></p>
            </div>
          </div>
        </div>
      </section>
      <section class="codePage" v-show="!pageShow">
          <dl class="*" v-for="val in phoneArr" :key="val.id" :id="val.title">
              <dt>{{val.title}}</dt>
              <dd v-for="val1 in val.arr" :key="val1.id" @click="phoneCode(val1.num)">
                  <span class="sesc">{{val1.country}}</span>
                  <span class="code">{{val1.num}}</span>
              </dd>
          </dl>
          <div class="navBar">
              <a :href="'#'+val3.title" v-for="val3 in phoneArr" :key="val3.id" v-if="val3.title!='*'">{{val3.title}}</a>
          </div>
      </section>
      <ValidateBox :userId='id'></ValidateBox>
  </div>
</template>

<script>
import ValidateBox from '@/components/ValidateBox'
import $ from 'jquery'
export default {
  data(){
    return {
      pageShow:true,
      pwdShow:true,
      pwdCloseShow:false,
      userCloseShow:false,
      phoneShow:false,
      codeShow:false,
      eye:true,
      loginWay:'短信验证码登录',
      title:'京东登录',
      phoneArr:[],
      username:'',
      password:'',
      message:'手机号格式错误',
      id:0
    }
  },
  created(){
    this.getPhone();
  },
  components:{
    ValidateBox
  },
  methods:{
    cutWay(){
      if(this.loginWay=='账号密码登录'){
        this.loginWay='短信验证码登录';
        this.pwdShow=true;
      }else{
        this.loginWay='账号密码登录';
        this.pwdShow=false;
      }
    },
    areaShow(){
        this.pageShow=false;
        this.title='选择国家或者地区';
    },
    back(){
      this.title='京东登录';
      this.pageShow=true;
    },
    cutEye(){
      if(this.eye){
        $('.eye').css({
          backgroundImage:'url()'
        })
        $('#password').prop('type','text');
        this.eye=false;
      }else{
        $('.eye').css({
          backgroundImage:'url()'
        })
        $('#password').prop('type','password');
        this.eye=true;
      }
    },
    clearInput(e){
      $('#loginBtn').removeClass('loginActive');
      $('#loginBtn2').removeClass('loginActive');
      if($('#phone').val()==''){
        $('#verCode').css('color','#848689');
      }
    },
    loginKey(){
      if($('#username').val()!==''&&$('#password').val()!==''){
        $('#loginBtn').addClass('loginActive');
      }else{
        $('#loginBtn').removeClass('loginActive');
      }
    },
    loginKey2(){
      var reg=/^1[3578]\d{9}$/;
      if(reg.test($('#phone').val())){
        $('#verCode').css('color','#f10000');
      }else{
        $('#verCode').css('color','#848689');
      }
      if(reg.test($('#phone').val())&&$('#codeNum').val()!==''){
        $('#loginBtn2').addClass('loginActive');
      }else{
        $('#loginBtn2').removeClass('loginActive');
      }
    },
    loginIng(){
      var reg=/^1[3578]\d{9}$/;
      if(reg.test(Number(this.username))){
        this.axios.post('/users').then((ret)=>{
            let {data,error}=ret.data;
            $(data).map((index,val)=>{
              if(val.phone==this.username&&val.password==this.password){
                this.$set(this.isLogin,val.id,true);
                this.id=val.id;
              }
            })
            
            if(this.isLogin[this.id]){
              //登陆中
              if($('#loginBtn').hasClass('loginActive')){
                $('#loginBtn').html('登录中');
                $('#loginBtn').css('opacity','0.6');
              }else{
                return;
              }
              setTimeout(()=>{
                $('#validatebox').css('display','block').addClass('loginBox');
              },2000);
            }else{
              this.message='用户名或密码错误';
              setTimeout(()=>{
                    $('.errorDialog .toast').css('opacity','1');
                    setTimeout(()=>{
                        $('.errorDialog .toast').css('opacity','0');
                    },2000);
                },100);
            }
        }).catch(()=>{})
      }else{
        this.message='手机号格式错误';
        setTimeout(()=>{
              $('.errorDialog .toast').css('opacity','1');
              setTimeout(()=>{
                  $('.errorDialog .toast').css('opacity','0');
              },2000);
          },100);
      }
    },
    loginIng2(){
      if($('#loginBtn2').hasClass('loginActive')){
        $('#loginBtn2').html('登录中');
        $('#loginBtn2').css('opacity','0.6');
      }else{
        return;
      }
    },
    codeEvent(){
      var reg=/^1[3578]\d{9}$/;
      if(reg.test($('#phone').val())){
        var num=6;
        var timer=setInterval(()=>{
            num--;
            $('#verCode').css({
              color:'#848689',
              paddingLeft:'2px'
            }).html('重新发送(0'+num+'s)');
            if(num<=0){
              clearInterval(timer);
              $('#verCode').css({
                color:'#f10000',
                paddingLeft:'37px'
              }).html('获取验证码');
            }
        },1000);
      }else{
        return;
      }
    },
    getPhone(){
      this.axios.get('/phone').then((ret)=>{
          let {data,error}=ret.data;
          this.phoneArr=data;
      }).catch(()=>{})
    },
    phoneCode(num){
      $('.areaBox .code').html(num);
      this.back();
    }
  }
}
</script>

<style scoped lang='scss'>
header{
  height: 103px;
  line-height: 103px;
  background:#fff;
  font-size: 40px;
  z-index: 999;
  text-align: center;
  position: relative;
  .back{
    width: 56px;
    height: 56px;
    display: block;
    position: absolute;
    background:url(/static/login/back.png) no-repeat;
    background-size: 100% auto;
    top: 23px ;
    left: 47px;
  }
}
.page{
  background:#fff;
  padding:0 58px 58px;
  .wrap{
    .userLogin{
      position: relative;
      .inputContainer{
        height: 117px;
        padding: 23px 0;
        position: relative;
        overflow: hidden;
        margin-top: 46px;
        background-color: #fff;
        border-bottom: 2px solid #efefef;
        box-sizing: border-box;
        .areaBox{
          position: absolute;
          width: 169px;
          height: 117px;
          top: 0;
          left: 0;
          line-height: 117px;
          .code{
            font-family: PingFangSC-Semibold;
            display: inline-block;
            text-align: center;
            width: 117px;
            font-size: 37px;
          }
          .areaIcon{
            position: absolute;
            top: 50px;
            right: 18px;
            width: 32px;
            height: 14px;
            overflow: hidden;
            background:url(/static/login/down.png) no-repeat;
            background-size: 100% auto;
            display: inline-block;
            margin-left: 14px;
          }
        }
        #phone{
          padding-left: 163px;
          padding-right: 280px;
        }
        input{
          width: 100%;
          height: 100%;
          color:#222;
          box-sizing: border-box;
          font-size: 38px;
          border:0;
          border-radius: 0;
          outline: 0;
          &::-webkit-input-placeholder{
            color: #aaa;
          }
        }
        #username{
          padding-right: 70px;
        }
        #password{
          padding-right: 352px;
        }
        .close{
          background:url(/static/login/close.png) no-repeat;
          width: 56px;
          height: 56px;
          overflow: hidden;
          position: absolute;
          background-size: 100% auto;
          top: 30px;
        }
        .userClose{
          right: 0;
        }
        .pwdClose{
          right: 290px;
        }
        .telClose{
          left: 350px;
        }
        .eye{
          position: absolute;
          width: 56px;
          height: 56px;
          background-image: url(/static/login/eyebi.png);
          background-repeat: no-repeat;
          background-size: 100% auto;
          box-sizing: border-box;
          right: 210px;
          top: 30px;
          z-index: 99;
        }
        #verCode{
          color:#848689;
        }
        .forget{
          position: absolute;
          height: 52px;
          line-height: 52px;
          right: 0;
          top: 29px;
          background-color: #fff;
          color:#222;
          font-size: 34px;
          border:0;
          outline: 0;
          border-radius: 4px;
          text-align: center;
          padding-left: 37px;
          border-left: 2px solid #999;
          box-shadow: none;
        }
      }
    }
    .notice{
      font-size: 32px;
      line-height: 70px;
      color:#f23030;
      height: 70px;
      text-align: left;
    }
    .btn{
      width: 100%;
      height: 117px;
      line-height: 117px;
      display: block;
      border-radius: 58px;
      font-size: 37px;
      text-align: center;
      text-decoration: none;
    }
    .loBtn{
      background: linear-gradient(90deg,#fab3b3,#ffbcb3 73%,#ffcaba);
      color:#fff;
    }
    .loginActive{
      background: linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18);
    }
    #loginOneStep{
      box-sizing: border-box;
      color:#f23030;
      border:3px solid #ff2000;
      background:#fff;
      margin-top: 23px;
    }
    .quickWay{
      margin-top: 46px;
      text-align: center;
      .ways{
        display: block;
        float: left;
        color: #999;
        line-height: 50px;
        font-size: 34px;
        text-decoration: none;
      }
      .way2{
        float: right;
      }
      .clear{
        clear: both;
      }
    }
    .loginType{
      .quickLogin{
        height: 187px;
        position: relative;
        padding: 57px 0 0;
        border-top: 2px solid #efefef;
        text-align: center;
        h4{
          margin: 0;
          font-size: 28px;
          font-weight: 400;
          position: absolute;
          top: -32px;
          left: 30%;
          background-color:#fff;
          padding:11px 35px;
          color:#ccc;
        }
        .loginWays{
          position: relative;
          width: 112px;
          height: 112px;
          color: #616161;
          margin: 0 35px;
          font-size: 32px;
          display: inline-block;
          text-align: center;
          .icon{
            width: 112px;
            height: 112px;
            overflow: hidden;
            display: block;
            position: absolute;
            background-repeat: no-repeat;
            background-size: 100% auto;
          }
          .qq{
            background-image: url(/static/login/qq.png);
          }
          .weChat{
            background-image: url(/static/login/weChat.png);
          }
          .txt{
            position: absolute;
            bottom: -52px;
            left: 0;
            display: inline-block;
            width: 112px;
            text-align: center;
            color: #999;
            font-size: 28px;
          }
        }
      }
    }
    .errorDialog {
        height: 205px;
        box-sizing: border-box;
        padding: 23px 35px;
        color: #fff;
        z-index: 200;
        text-align: center;
        .toast {
            opacity: 0;
            max-width: 80%;
            background: #2b2b2b;
            padding: 23px 35px;
            display: inline-table;
            text-align: left;
            border-radius: 7px;
            font-size: 28px;
            line-height: 1.5;
            transition: all 0.5s ease;
        }
    }
    .agreeTip{
      margin-top: 28px;
      text-align: center;
      font-size: 30px;
      color:#bebebe;
      p{
        margin: 0;
        a{
          color:#409eff;
          text-decoration: none;
        }
      }
    }
  }
}
.codePage{
    position: absolute;
    top: 105px;
    left: 0;
    bottom: 0;
    background-color: #fff;
    width: 750px;
    .navBar{
        position: fixed;
        margin-top: 101px;
        right: 0;
        top: 0;
        width: 52px;
        background-color: #fff;
        font-size: 25px;
        color:#2d90ff;
        a{
            display: block;
            text-align: center;
            color: #2d90ff;
            margin: 0;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
        }
    }
    dl{
        background-color: #fff;
        margin: 0;
        padding: 0;
        dt{
            line-height: 101px;
            text-align: left;
            background-color: #f5f5f5;
            padding: 0 52px 0 35px;
            color:#999;
            font-size: 30px;
        }
        dd{
            line-height: 101px;
            text-align: left;
            padding: 0;
            border-bottom: 2px solid #dbdbdb;
            margin: 0 52px 0 35px;
            font-size: 42px;
            .sesc{
                color:#333;
            }
            .code{
                float: right;
                padding-right: 28px;
                color:#999;
                font-size: 30px;
            }
        }
    }
}


</style>
